<template>
	<div>
		<Form ref='newsForm' :model='newsData' :rules='newsRule' :label-width="50">
			<FormItem label='标题:' prop='name'>
				<Input v-model="newsData.name" placeholder="请输入标题" style="width: 600px;"></Input>
			</FormItem>
			<FormItem label='描述:' prop='description'>
				<Input v-model="newsData.description" placeholder="请输入描述" style="width: 600px;"></Input>
			</FormItem>
			<FormItem label='分类:'>
				<Select placeholder="请选择类型" style="width: 600px" @on-change='selectType'>
					<Option v-for="(item,index) in listData" :value="item.name" :key='index'>{{item.name}}</Option>
				</Select>
			</FormItem>
			<upload-pic :fileType="fileType" @upSuccess="setPicUrl" :fatherPicUrl="newsData.pic">
				<p class="tip">图片</p>
			</upload-pic>
			<FormItem label='内容:' prop='content'>
				<editor id="editor_id" height="500px" width="700px" v-model='newsData.content' :content="newsData.content" :loadStyleMode="false" @on-content-change="onContentChange" :uploadJson="'/ccmc/upload_json.jsp'">{{newsData.content}}</editor>
			</FormItem>
			<div class="button-box" style="margin-left: 370px;">
				<Button :loading="isKeep" type="primary" @click="keepNews('newsForm')">提交</Button>
			</div>
		</Form>
	</div>
</template>
<!-- 新增新闻页面 -->
<script>
	import uploadPic from "@/components/common/UploadPic.vue";
	export default {
		components: {
			uploadPic
		},
		data() {
			return {
				newsId: '',
				isKeep: false,
				type: '',
				listData: [],
				newsData: {
					id:'',
					name: '',
					description: '',
					content: '',
					pic: '',
					categoryId: '', // 分类Id
					seqNo: 1 //新闻排序
				},
				newsRule: {
					name: [{
						required: true,
						message: "请输入标题"
					}],
					description: [{
						required: true,
						message: "请输入描述"
					}],
					content: [{
						required: true,
						message: "请输入内容"
					}]
				},
				fileType: {
					fileType: 1
				}

			}
		},
		created() {
			this.getData(this.newsData);
		},
		methods: {
			getData(jsonData) {
				this.$http
					.post('/news_category/detail_list', jsonData)
					.then((res) => {
						console.log(res)
						this.listData = res.data.news
					})
					.catch((err) => {
						console.log(err)
						this.$Notice.error({
							title: '新闻分类列表获取失败!'
						})
					})
			},
			// 选择类型
			selectType(typeName) {
				this.listData.map((item) => {
					if(item.name === typeName) {
						this.newsData.categoryId = item.id;
						this.newsData.seqNo = item.seqNo
					}
				})
			},
			onContentChange(val) {
				this.newsData.content = val;
			},
			// 提交
			keepNews(refName) {
				console.log(this.newsData)
				this.$refs[refName].validate((valid) => {
					if(valid) {
						this.$http.post('/news/add', this.newsData)
							.then((res) => {
								//		console.log(res)
								this.isKeep = false;
								this.$Message.success("表单提交成功！");
								this.$router.push({
									path: '/news_category/list'
								})
							})
							.catch((err) => {
								console.log(err)
								this.isKeep = false;
								this.$Notice.error({
									title: "表单提交失败!"
								})
							})
					}

				})

			},
			// 获取上传图片的地址
			setPicUrl(imgUrl) {
				this.newsData.pic = imgUrl;
			}
		}
	}
</script>

<style>
	.tip {
		font-size: 16px;
		margin-bottom: 16px;
		color: #0b9595;
	}
</style>